<template>
  <div class="music">
    <div class="music-play-pause">
      <span class="music-icon" @click="handlePlay">
        <i v-if="play" class="fa fa-play"></i>
        <i v-else-if="!play" class="fa fa-pause"></i>
      </span>
      <img class="music-image" :src="artInfo.image" alt="musicImage" :class="{'rotate': !play}" />
    </div>
    <img class="music-tag" src="//cs-static-assets.oss-cn-beijing.aliyuncs.com/jiudao_miniapp/music_text.png" alt="音乐tag" />
    <div class="music-text">{{ artInfo.content }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        play: true // 显示播放icon
      }
    },
    props: ["artInfo"],
    onLoad() {
      this.backgroundAudioManager = wx.getBackgroundAudioManager()
    },
    methods: {
      handlePlay() {
        this.play = !this.play
        if (this.play) {
          // 暂停状态
          this.backgroundAudioManager.pause()
        } else {
          // 播放状态
          const { url } = this.artInfo
          this.backgroundAudioManager.src = url
          this.backgroundAudioManager.play()
        }
      }
    },
    destroyed() {
      // v-if指令切换组件时，将音乐致为stop状态
      this.backgroundAudioManager.stop()
    }
  }
</script>

<style scoped>
.music {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 36rpx;
}
.music-play-pause {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.music-icon {
  position: absolute;
  height: 100rpx;
  width: 100rpx;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 防止旋转的时候覆盖住play和pause的按钮 */
  z-index: 999;
}
.music-image {
  width: 422rpx;
  height: 422rpx;
}
.music-tag {
  width: 46rpx;
  height: 142rpx;
  position: relative;
  right: 310rpx;
  bottom: 58rpx;
}
.music-text {
  max-width: 550px;
}

@keyframes rotate-img {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotate {
  animation: rotate-img 10s linear infinite;
}
</style>